<template>
	<div>
		<!-- <h2>盲盒列表</h2> -->
		<div class="demo-image" >
			<div class="block blind-box-container oneGrid-b" v-for="entity in array" :key="entity"
				v-on:click="toBlindBoxDetails(entity.blindBoxId)" :style="{ boxShadow: `var(--el-box-shadow-light)` }">
				<el-image class="image" :src="entity.imageUrl"></el-image>
				<h4 class="title">{{ entity.title }}</h4>
				<h4>介绍: {{entity.content}}</h4>
				<h4>总数量: {{entity.totalQuantity}}</h4>
				<h4>可用数量: {{entity.availableQuantity}}</h4>
				<h4>所需积分: {{entity.integralRequired}}</h4>
			</div>
		</div>
		<!-- <div class="awards">
			<ul v-for="(item,index) in array" :key="index">
				<li>
					<div @click="toJigsawPuzzleDetails(item.id)" id="oneGrid" class="login-container"
						:style="{ boxShadow: `var(--el-box-shadow-light)` }">
						<el-avatar :size="120" @error="errorHandler">
							<img :src="item.imageUrl" />
						</el-avatar>
						<h4>
							{{item.title}}

						</h4>
						<span>{{item.content}}</span>
					</div>
				</li>
			</ul>
		</div> -->

	</div>
</template>
<script>
	import storage from '/src/utils/localstorage.js'
	export default {
		name: "BlindBoxList",
		data() {
			return {
				entity: {},
				array: [],
			}
		},
		mounted() { //挂载之后执行的方法
			this.getAllBlindBox();
		},
		methods: {
			toBlindBoxDetails(blindBoxId){//转到详情页
				storage.save("blindBoxId",blindBoxId);
				this.$router.push('/blindBoxDetails')
			},			
			//查询所有拼图
			getAllBlindBox() {
				this.$axios.get('/api/blind/box/getAllBlindBox')
					.then(data => {
						this.array = data.list;
						// //foreach遍历数组
						// this.array.forEach(function(item, index) {
						// 	// console.log("item="+item);
						// 	console.log("item[" + index + "].title=" + item.title)
						// 	//item 就是当日按循环到的对象
						// 	//index是循环的索引，从0开始
						// })
					})
			},
			//转到拼图详情页
			toJigsawPuzzleDetails(id) {
				console.log("toJigsawPuzzleDetails() id=" + id)
				localStorage.save("jid", id)
				// console.log("jid=" + localStorage.get("jid"))
				this.$router.push({
					path: '/jigsawPuzzleDetails',
					// params: {id:id},
				})
			}
		}
	}
</script>

<style scoped>
	ul>li {
		float: left;
		list-style: none;
	}
	.image {
		display:inline-block;
		width: 200px;
	}
	.blind-box-container {
		border: silver solid 2px;
		border-radius: 5px;
		width: 800px;
		height: 440px;
	}
	.title{
		display: inline-block;
	}
	.demo-image {
		display: flex;
		justify-content: center;
		flex-direction: row-reverse;
	}

	.oneGrid-b {
		margin-right: 68px;

	}

	/* #threeGrid {
		margin-left: 68px;
	} */
</style>
